import { useState } from 'react'
import { Outlet } from 'react-router'
import styled from "styled-components"
import { Link } from 'react-router'

const FooterItem = styled.div`
color:#333;
display:flex;
flex-direction:column;
justify-content:center;
align-items:center;
flex:1;
`

function Layout() {
  const [count, setCount] = useState(0)

  return (
    <>
      <div className='page flex-col h-full flex'>
        <div className='flex-1 overflow-auto relative'>
          <Outlet />
        </div>
        <div className='mt-[50px]'></div>
        <div className='footer flex'>
          <Link to="/home" className='flex-1'>
            <FooterItem>
              <span>icon</span>
              <span>首页</span>
            </FooterItem>
          </Link>
          <Link to="/manage" className='flex-1'>
            <FooterItem>
              <span>icon</span>
              <span>管店</span>
            </FooterItem>
          </Link>
          <Link to="/promotion" className='flex-1'>
            <FooterItem>
              <span>icon</span>
              <span>营销</span>
            </FooterItem>
          </Link>
          <Link to="/analysis" className='flex-1'>
            <FooterItem>
              <span>icon</span>
              <span>分析</span>
            </FooterItem>
          </Link>
        </div>
      </div>
    </>
  )
}

export default Layout
